<template>
  <div class="box">
    <div class="top">
      <h3>大学生志愿者</h3>
    </div>
    <div class="center">
      <ul>
        <li><button class="btn" type="button" @click="">活动</button></li>
        <li><button class="btn" type="button" @click="">活动</button></li>
        <li><button  class="btn"type="button" @click="">活动</button></li>
        <li><button  class="btn"type="button" @click="">活动</button></li>
        <li><button class="btn" type="button" @click="">活动</button></li>
      </ul>
    </div>
    <div class="down"></div>
  </div>
</template>
<script setup>

</script>
<style scoped>
* {
  margin: 0px;
  padding: 0px;
}

#app {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 500px;
  background-color: rgb(22, 26, 24);
  border-radius: 3px;
  padding: 3px
}

.top {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 400px;
  height: 20%;
  background-color: red;

}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 20%;
  background-color: rgb(68, 68, 119);

}

.down {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 60%;
  background-color: rgb(76, 143, 120);

}

li {
  float: none;
  display: inline;
flex: 1;
background-color: burlywood;}

/* ul{
  display: flex;
  flex-direction: column;
} */
ul {
  list-style: none;
  padding: 0;
  width: 100%;
  /* 设置flex布局
   */
  display: flex;


}
.btn{
  width: 80px;
  height: 100%;
}
</style>